<template>
  <div class="myCourses">
    <van-search style="border-radius: 16px;" v-model="value" placeholder="请输入课程名称" />
    <div class="classManagementList">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell v-for="item in list" :key="item" style="background: #F5F6F7">
            <div class="card" @click="showtk = true">
              <!--              <img src="/src/img/teacher/tracherwks.png" class="tracherwksManag"/>-->
              <div class="cardTitleList">
                <div class="cardleft"><img src="/src/img/xz.png"/>课程名称</div>
              </div>
              <div class="cardCenter">
                <div class="classManagement">
                  <div class="cardLeft">课程编码</div>
                  <div class="cardRight">A12456</div>
                </div>
                <div class="classManagement">
                  <div class="cardLeft">课程状态</div>
                  <div class="cardRight">正常</div>
                </div>
                <div class="classManagement">
                  <div class="cardLeft">课程登记</div>
                  <div class="cardRight">初级</div>
                </div>
                <div class="classManagement">
                  <div class="cardLeft">课程周期</div>
                  <div class="cardRight">2025-01-10</div>
                </div>
                <div class="classManagement">
                  <div class="cardLeft">总时长</div>
                  <div class="cardRight">1</div>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>

  <van-floating-bubble
    axis="xy"
    icon="wap-home"
    magnetic="x"
    @offset-change="onOffsetChange"
    @click="onClick"
  />
</template>

<script>
export default {
  mounted() {
  },
  setup() {
    const onOffsetChange = (offset) => {
      // showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`);
    };


    const value = ref('');
    //下拉列表
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }
        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;
        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };
    const onRefresh = () => {
      finished.value = false;
      classManagement.value = true;
      onLoad();
    };
    return {
      value,
      refreshing,
      list,
      loading,
      finished,
      onRefresh,
      onLoad,
      onOffsetChange
    };
  },
  methods:{
    onClick(){
      window.close();
      this.$router.push('/index')
    }

  }
}
</script>

<style setup>
.van-search__content{
  border-radius: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #999999;
  line-height: 20px;
  text-align: justify;
  font-style: normal;
}
.classManagementList{
  background: #F5F6F7;
}

.card {
  border-radius: 8px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
.cardTitleList {
  display: flex;
  background: #72D9FF;
  align-items: center;
  padding: 12px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  border-bottom: 1px solid #E9E9E9;
  justify-content: space-between;

.cardleft {
  display: flex;
  align-items: center;
}

img {
  width: 13px;
  margin-right: 6px;
  height: 15px;
}
}

.cardCenter {
  padding-bottom: 17px;
}

.classManagement {
  display: flex;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin: 12px 16px 0px;
  justify-content: space-between;

.cardLeft {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  margin-right: 30px;
}

.cardRight {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
  text-align: left;
  font-style: normal;
}
}

.left {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 5px;
  background-color: pink;
  margin-right: 10px;
}

.cardBottomComment {
  display: flex;
  justify-content: flex-end;
  margin: 14px 16px 0px;

img {
  width: 111;
  height: 30px;
  margin-left: 6px;
}
}
}
.tracherwksManag{
  width: 65px;
  height: 29px;
  top:0px;
  right: 0px;
  position: absolute;
}
.van-action-sheet__description{
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 15px;
  color: #212F3E;
  line-height: 21px;
  text-align: center;
  font-style: normal;
}
</style>
